import { block } from "@/data";
import { ElButton, ElInput } from "element-plus";
import Range from "@/components/Range";
import { ElSelect } from "element-plus";
import { ElOption } from "element-plus";
//列表去可以显示所有的物料
//key 对应的组件映射关系
export interface IEditorConfig {
  label: string;
  preview: () => JSX.Element | string;
  render: (props: block["props"]) => JSX.Element | string;
  key: string;
  props?: Record<string, any>;
  model?: { [key in string]: any };
  resize?: { height?: boolean; width?: boolean };
}
export type optionsType = { label: string; value: string };
export type Componentkey = "text" | "button" | "input";
type ComponentMap = {
  [key in Componentkey]: IEditorConfig;
};
export type EditorConfigType = {
  register: (component: IEditorConfig) => void;
  componentsList: Array<IEditorConfig>;
  componentsMap: Partial<ComponentMap>;
};
const createEditorConfig = (): EditorConfigType => {
  const componentsList: Array<IEditorConfig> = [];
  const componentsMap: Partial<ComponentMap> = {};

  return {
    register: (component: IEditorConfig) => {
      componentsList.push(component);
      componentsMap[component.key as Componentkey] = component;
    },
    componentsList, //list 是渲染左侧物料区
    componentsMap, //map是渲染中间拖拽区
  };
};
export let registerConfig = createEditorConfig();
const createInputProp = (label: string) => ({
  type: "input",
  label,
});
const createColorProp = (label: string) => ({
  type: "color",
  label,
});
const crateSelectProp = (label: string, options: optionsType[]) => {
  return {
    type: "select",
    label,
    options,
  };
};
const crateTabelProp = (
  label: string,
  table: { key: string; options: { filed: string; label: string }[] }
) => ({
  type: "table",
  label,
  table,
});
registerConfig.register({
  label: "下拉框",
  preview: () => <ElSelect modelValue=""></ElSelect>,
  render: ({ props, model }) => {
    console.log(props, "props", model);
    let val = ref(model.default.modelValue || "");
    // {...model.default}
    return (
      <ElSelect
        style={{ width: "100px" }}
        {...model.default}
        onChange={(e: any) => {
          console.log(e, "propsmodel", model);
          val.value = e;
        }}
      >
        {props.options &&
          props.options.length &&
          props.options.map(
            (item: { label: string; value: string }, index: number) => {
              return (
                item && (
                  <ElOption
                    key={index}
                    label={item.label}
                    value={item.value}
                  ></ElOption>
                )
              );
            }
          )}
      </ElSelect>
    );
  },
  key: "table",
  props: {
    options: crateTabelProp("下拉框选项", {
      options: [
        { label: "显示值", filed: "label" },
        { label: "绑定值", filed: "value" },
      ],
      key: "label", //显示给用户的值是label
    }),
  },
  model: {
    default: "绑定字段",
  },
});
registerConfig.register({
  label: "文本",
  preview: () => "预览文本",
  render: ({ props }) => {
    return (
      <span
        style={{ color: props.color || "#000", fontSize: props.size || "12px" }}
      >
        {props.text || "渲染文本"}
      </span>
    );
  },
  key: "text",
  props: {
    text: createInputProp("文本内容"),
    color: createColorProp("字体颜色"),
    size: crateSelectProp("字体大小", [
      { label: "12px", value: "12px" },
      { label: "16px", value: "16px" },
      { label: "20px", value: "20px" },
      { label: "24px", value: "24px" },
    ]),
  },
});
registerConfig.register({
  label: "按钮",
  resize: {
    width: true,
    height: true,
  },
  preview: () => <ElButton>预览按钮</ElButton>,
  render: ({ props, size }) => (
    <ElButton
      style={{ height: size.height + "px", width: size.width + "px" }}
      {...props}
      type={props.type || "primary"}
      size={props.size || ""}
    >
      {props.text || "渲染按钮"}
    </ElButton>
  ),
  key: "button",
  props: {
    text: createInputProp("按钮内容"),
    type: crateSelectProp("按钮类型", [
      { label: "默认", value: "primary" },
      { label: "成功", value: "success" },
      { label: "警告", value: "warning" },
      { label: "危险", value: "danger" },
      { label: "文本", value: "text" },
    ]),
    size: crateSelectProp("按钮大小", [
      { label: "默认", value: "" },
      { label: "中等", value: "medium" },
      { label: "小型", value: "small" },
    ]),
  },
});
registerConfig.register({
  label: "输入框",
  resize: {
    width: true,
  },
  preview: () => <ElInput placeholder="预览输入框"></ElInput>,
  render: ({ model ,size}) => (
    <ElInput
      placeholder="渲染输入框"
      {...model.default}
      onChange={(e: any) => {
        console.log(e, "propsmodel", model);
      }}
      style={{  width: size.width + "px" }}
    ></ElInput>
  ),
  key: "input",
  props: {},
  model: {
    default: "绑定字段",
  },
});

registerConfig.register({
  label: "范围选择器",
  preview: () => <Range></Range>,
  render: ({ model }) => {
    return (
      <Range
        {...{
          start: model.start.modelValue,
          "onUpdate:start": model.start["onUpdate:modelValue"],
          end: model.end.modelValue,
          "onUpdate:end": model.end["onUpdate:modelValue"],
        }}
      ></Range>
    );
  },
  key: "range",
  props: {},
  model: {
    start: "开始范伟字段",
    end: "结束范伟字段",
  },
});
